import { useState } from "react";
import { useEffect } from "react";
import store from "./store";
import { changeNameFn } from "./store/actionCreators";
function App() {
  // 初次获取仓库里面的数据
  const [person, setPerson] = useState(store.getState());
  // 修改名字
  const changeName = () => {
    store.dispatch(changeNameFn());
  };
  // 监听仓库数据变化
  const unSubscribe = store.subscribe(() => {
    console.log("监听到数据变化了");
    // 重新获取最新数据
    setPerson({ ...store.getState() });
  });
  // 取消监听
  useEffect(() => {
    return () => {
      unSubscribe();
    };
  });

  return (
    <>
      <h1>仓库里面的数据</h1>
      <div>
        name:{person.name} -- {person.age}
      </div>
      <button onClick={changeName}>点我修改名字</button>
    </>
  );
}

export default App;
